<template>
  <BaseDialog title="查看详情" :handleCancel="handleCancel" :dialogVisible="props.dialogVisible" width="1000px">
    <div style="padding-bottom: 10px">{{ opinionName(props.recordType) }}：{{ props.item.opinionKey }}</div>
    <el-table ref="baseTable" :data="tableData" v-loading="loading" max-height="500px">
      <el-table-column prop="groupId" label="微信群ID" />
      <el-table-column prop="wxGroupName" label="微信群名称" min-width="100" show-overflow-tooltip />
      <el-table-column prop="num" label="触发次数" width="100" />
      <el-table-column prop="sendUserDtoList" label="客户微信昵称（触发次数）" minWidth="200" show-overflow-tooltip>
        <template #default="scope" show-overflow-tooltip>
          <span v-for="(item, i) in scope.row.sendUserDtoList" :key="i">
            <span> {{ item.sendUserName }}</span
            ><span>({{ item.sendNum }})</span>
            <span v-if="i + 1 < scope.row.sendUserDtoList?.length"> 、</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="powerNames" label="供电单位" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="powerNames" label="供电线路" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="powerNames" label="台区" show-overflow-tooltip> </el-table-column>
      <el-table-column prop="communityNames" label="相关片区/村社" minWidth="160"> </el-table-column>
      <el-table-column prop="managerNames" label="关联网格经理" min-width="100"> </el-table-column>
    </el-table>
    <div style="padding-top: 20px">
      <el-button type="default" @click="download"
        ><el-icon> <Bottom></Bottom> </el-icon>导出</el-button
      >
    </div>
  </BaseDialog>
</template>

<script setup lang="ts">
import { reportStatisticsService } from '@/api/reportStatistics';
import { basicConfigService } from '@/api/basicConfig';

const props = defineProps({
  dialogVisible: {
    type: Boolean,
  },
  item: {
    type: Object,
  },

  type: {
    type: String,
  },
  recordType: {
    type: String,
  },
});

const opinionName = computed(() => {
  return (val) => {
    if (val === '1') {
      return '舆情关键词';
    }
    if (val === '2') {
      return '回复关键词';
    }
    if (val === '3') {
      return '常见问题';
    }
    return '';
  };
});
const loading = ref(false);
const tableData = ref([]);
const getTableData = () => {
  loading.value = true;
  reportStatisticsService
    .opinionKeyRecordGetByIdStr({
      data: props.item.idStr,
    })
    .then((res) => {
      loading.value = false;
      tableData.value = res.data;
    });
};

const emit = defineEmits(['update:dialogVisible']);
const handleCancel = () => {
  emit('update:dialogVisible', false);
};
onMounted(() => {
  getTableData();
});

// 导出
const download = async () => {
  // 下载
  let baseName = '';
  if (props.recordType === '1') {
    baseName = '舆情词';
  }
  if (props.recordType === '2') {
    baseName = '回复关键词';
  }
  if (props.recordType === '3') {
    baseName = '常见问题';
  }
  const name: any = baseName + '-' + props.item.opinionKey;
  basicConfigService
    .queryExport({
      data: props.item.idStr,
    })
    .then((res) => {
      var blob = new Blob([res]);
      let url = window.URL.createObjectURL(blob);
      let link = document.createElement('a');
      link.style.display = 'none';
      link.href = url;
      link.setAttribute('download', name + '.xls');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    });
};
</script>

<style lang="scss" scoped>
.detail {
  :deep(.el-form-item__label:before) {
    content: ' ' !important;
  }
}
</style>
